<template>
    <div class="processdetail1">

        <div class="finger">
            点击这里
            <img src="@/static/finger.svg" alt="">
        </div>
        <img src="@/static/processdetail3.jpg" alt="" class="jinbi" >
        <div class="awardword">哇，小朋友，你刚刚表现得很棒哦，奖励你一个金币</div>
    </div>
</template>
<style lang="scss" scoped>
.finger {
    display: flex;
    position: absolute;
    right: 3rem;
    top: 10rem;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: red;
    font-weight: 900;

    img {
        transform: rotate(245deg);
    }
}

.processdetail1 {
    height: 60%;
    width: 40rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .jinbi {
        height: 60%;
        width: 100%;
        animation: scaleAnimation 3s infinite alternate;
        /* Alternate scaling */
    }

    @keyframes scaleAnimation {
        0% {
            transform: scale(1);
            /* Original size */
        }

        100% {
            transform: scale(1.05);
            /* Scaled up */
        }
    }

    .awardword {
        // position: absolute;
        margin: 0 auto;
        border: #875a44 solid 4px;
        font-size: 3rem;
        background-color: #fbe8a3;
    }
}
</style>